<template>
	<div class="managementcenter">
		<div class="managecontent">
			<div class="title">{{ $t('ivcs.retrieval') }}</div>
			<div class="inputs">
				<Select v-model="skillGroup" multiple style="width:260px" :placeholder="$t('ivcs.pleaseSelectSkillGroup')">
					<Option v-for="item in skillGroups" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
				<Select v-model="agentStatu" style="width:260px;margin-left:16px" :placeholder="$t('ivcs.pleaseSelectAgentStatus')">
					<Option v-for="item in agentStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
				<Input v-model="workerNum" :placeholder="$t('ivcs.pleaseInputAgentNum')" style="width:300px;margin-left:16px" />
				<button class="btn" @click="search">{{ $t('ivcs.retrieval') }}</button>
			</div>
			<div class="monitorbtn">
				<button @click="showMonitoring" :class="sessionRoomData.length === 0 ? 'deactive' : 'active'" :disabled="sessionRoomData.length === 0">{{ $t('ivcs.serviceMonitoring') }}</button>
			</div>
			<div class="table-box">
				<Table ref="selection" stripe :loading="loading" :columns="tableTitles" :data="tableConents" @on-selection-change="selectSession"></Table>
				<Page :total="tableConents.length" show-total :page-size="pageSize" style="float:right;margin-top:30px;" @on-change="handlePage" />
			</div>
			<!-- 服务监控内容 -->
			<VideoModal :showVideoModal="showVideoModal" @closeModal="closeModal">
				<template v-slot:contents>
					<div class="videos">
						<div class="video-box">
							<template v-for="(tokenInfo, index) in allTokens">
								<ObserverVideo :token="tokenInfo.token" :agentNo="tokenInfo.serviceNo" :key="tokenInfo.token" :streamType="'mixed'">
									<template v-slot:checkbox>
										<Radio class="check" v-model="tokenInfo.isChoose" @on-change="chooseVideo($event, index)"></Radio>
									</template>
								</ObserverVideo>
							</template>
						</div>
						<div class="view-btn">
							<Button class="view-info" :class="!currentSession ? 'deactive' : 'active'" :disabled="!currentSession" @click="joinSession">{{ $t('ivcs.joinCurrentSession') }}</Button>
						</div>
					</div>
				</template>
			</VideoModal>
		</div>
	</div>
</template>

<script>
import _ from 'lodash';
import ObserverVideo from './ObserverVideo.vue';
import VideoModal from './VideoModal.vue';
import { getRoomToken } from '../api/api';
export default {
	name: 'ManagementCenter',
	components: {
		VideoModal,
		ObserverVideo
	},
	props: ['managentData', 'initData', 'chiefs'],
	data() {
		return {
			pageSize: 10,
			showVideoModal: false,
			loading: false,
			currentSession: null,

			agentStatu: '',
			agentStatus: [
				{
					value: '',
					label: this.$t('ivcs.pleaseSelectAgentStatus')
				},
				{
					value: 'online',
					label: this.$t('ivcs.online')
				},
				{
					value: 'ready',
					label: this.$t('ivcs.ready')
				},
				{
					value: 'notReady',
					label: this.$t('ivcs.unready')
				},
				{
					value: 'ringing',
					label: this.$t('ivcs.ringing')
				},
				{
					value: 'serving',
					label: this.$t('ivcs.serving')
				},
				{
					value: 'otherWork',
					label: this.$t('ivcs.rest')
				}
			],
			workerNum: '',
			skillGroup: [],
			tableTitles: [
				{
					type: 'selection',
					width: 30,
					align: 'center'
				},
				{
					title: this.$t('ivcs.orderNum'),
					type: 'index',
					align: 'center'
				},
				{
					title: this.$t('ivcs.number'),
					key: 'serviceNo',
					align: 'center'
				},
				{
					title: this.$t('ivcs.name'),
					key: 'name',
					align: 'center'
				},
				{
					title: this.$t('ivcs.belongSkillGroup'),
					key: 'belongSkillGroup',
					align: 'center'
				},
				{
					title: this.$t('ivcs.checkedInSkillGroup'),
					key: 'checkInSkillGroup',
					align: 'center'
				},
				{
					title: this.$t('ivcs.status'),
					key: 'currentStatus',
					align: 'center'
				}
			],
			allGroups: JSON.parse(sessionStorage.getItem('groupsList')),
			// 查询信息参数
			checkInfo: {
				page: '',
				pageSize: 10,
				userName: '',
				agentStatus: '',
				groups: this.searchGroupChief
			},
			sessionRoomData: [],
			allTokens: [],
			agentSeatId: sessionStorage.getItem('agentSeatId'),
			operatorName: sessionStorage.getItem('operatorName')
		};
	},
	computed: {
		tableConents: function() {
			let arr = [];
			_.forEach(this.managentData, item => {
				item.currentStatus = _.find(this.agentStatus, { value: item.currentStatus }) ? _.find(this.agentStatus, { value: item.currentStatus }).label : item.currentStatus;
				arr.push(item);
			});
			return arr;
		},
		skillGroups: function() {
			let arr = [];
			var self = this;
			_.forEach(this.allGroups, function(item) {
				_.forEach(self.chiefs, function(part) {
					if (item.id == part.data) {
						arr.push({
							value: item.id,
							label: item.name
						});
					}
				});
			});
			return arr;
		}
	},
	methods: {
		selectSession(selection) {
			this.sessionRoomData = selection;
			let userData = selection[0].userData;
			let formid = selection[0].session.formId;
			this.$emit('selectSession', userData, formid);
			console.log(selection);
		},
		closeModal() {
			this.showVideoModal = false;
			this.currentSession = null;
			this.sessionRoomData = [];
			this.allTokens = [];
		},
		showMonitoring() {
			if (this.sessionRoomData.length === 0) {
				this.$Message.info(this.$t('session.joinSessionNoSelect'));
				return;
			}
			var self = this;
			this.showVideoModal = !this.showVideoModal;
			this.sessionRoomData.forEach(item => {
				console.log('session data', item);
				getRoomToken(item.session.roomId, self.operatorName)
					.then(res => {
						this.allTokens.push({
							token: res.data,
							agentNo: item.agentNo,
							isChoose: '',
							serviceNo: item.serviceNo,
							currentSkill: item.toGroup ? item.toGroup[0] : '',
							roomid: item.session.roomId || ''
						});
					})
					.catch(error => {
						this.$requestApiError(error.response, () => {});
					});
			});
		},
		handlePage(value) {
			this.checkInfo.page = value;
			this.$emit('handlePage', this.checkInfo);
		},
		search() {
			// page,pageSize,agentId,agentStatus,groups
			this.checkInfo.agentStatus = this.agentStatu;
			this.checkInfo.groups = this.skillGroup;
			this.checkInfo.userName = this.workerNum;
			this.$emit('search', this.checkInfo);
		},
		//选择静默观战的会话
		chooseVideo(e, index) {
			console.log(e, index, this.allTokens);
			this.allTokens.forEach((item, curindex) => {
				if (index !== curindex) {
					item.isChoose = false;
				} else {
					this.currentSession = item;
				}
			});
		},

		//强插会话
		joinSession() {
			if (!this.currentSession) {
				return;
			}
			let self = this;
			this.tableConents.forEach(item => {
				if (item.session) {
					let session = item.session;
					let toGroup = item.toGroup[0];
					let toScenarioId = item.toScenarioId[0];
					self.$store.commit('setGroupId', toGroup);
					let obj = { toGroup: toGroup, sessionId: session.sessionId, toScenarioId: toScenarioId, roomId: item.session.roomId };
					self.$emit('joinSession', obj);
				}
			});
			this.closeModal();
		}
	}
};
</script>

<style scoped>
.video-box {
	display: flex;
	align-items: center;
	flex-flow: wrap;
}
button {
	outline: none;
	border: 0;
	background-color: transparent;
}
.managementcenter {
	border: 1px solid px;
	background: #e5e5e5;
	position: absolute;
	top: 64px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	/* opacity: 0.21; */
}
.managecontent {
	width: 98%;
	height: 96%;
	margin: 0 auto;
	margin-top: 18px;
	background: #ffffff;
	padding: 20px;
}
.title {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	text-align: left;
	margin-bottom: 23px;
}
.inputs {
	display: flex;
}
.btn {
	width: 72px;
	height: 32px;
	border: 1px solid #6384fe;
	border-radius: 2px;
	margin-left: 16px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe;
	line-height: 24px;
	cursor: pointer;
}
.btn:hover {
	background: #6384fe;
	color: #ffffff;
}
.monitorbtn {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 16px;
}
.monitorbtn button {
	width: 100px;
	height: 34px;
	background: #6384fe;
	border-radius: 2px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	line-height: 24px;
	cursor: pointer;
}
.view-btn {
	text-align: right;
	margin-top: 22px;
}
.view-info {
	width: 110px;
	height: 40px;
	border-radius: 4px;
	color: #fff;
}
.active {
	background: #6384fe;
	border: 1px solid #6384fe;
}
.deactive {
	background: #666 !important;
	border: 1px solid #666;
}
/* .videos{
        width:488px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        border:1px solid blue;
    } */
.singlevideo {
	height: 106px;
	border: 1px solid red;
	margin-bottom: 15px;
	margin-right: 2px;
}
.view-btn {
	text-align: right;
}
.view-info {
	width: 110px;
	height: 40px;
	border-radius: 4px;
	color: #fff;
}
.active {
	background: #6384fe;
	border: 1px solid #6384fe;
}
.deactive {
	background: #666;
	border: 1px solid #666;
}
.check {
	position: absolute;
	z-index: 10;
	right: -8px;
	top: 6px;
}
</style>
